import React, { FC, ReactNode } from "react";
import { Card, Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';

type DataDisplayCardType = {
  title: string;
  data?: string,
  company?: string,
  date?: ReactNode | string,
  explain: string,
  icon: ReactNode
}

const DataDisplayCard: FC<DataDisplayCardType> = ({
  title,
  data,
  company,
  date,
  explain,
  icon }) => {
  return (
    <Card
      bodyStyle={{ padding: 20 }}
    >
      {/* 顶部标题 */}
      <div style={{ position: 'relative' }}>
        <span style={{ color: '#777', }}>{title}</span>
        {/* <span style={{ color: '#777', position: 'absolute', right: 0 }}>
          <Tooltip title={explain}>
            <InfoCircleOutlined />
          </Tooltip>
        </span> */}
      </div>
      {/* 数字显示区域 */}
      <div style={{ display: 'flex', justifyContent: "space-between" }}>
        <span style={{ fontSize: 30 }}>{data}</span>
        {icon}
      </div>
      {/* 单位 */}
      <div style={{ paddingBottom: 8 }}>
        {
          company ?
            <span>{company}</span> : null
        }
      </div>
      {/* 日期 */}
      <div style={{ paddingTop: 8, borderTop: "1px solid #f0f0f0" }}>
        <span>{date}</span>
      </div>
    </Card>
  )
}

export default DataDisplayCard